<template>
  <a-card direction="vertical" :size="12" fill :title="`包材辅料出库详情`">
    <BaocaiOutSearch
      ref="baocaiOutSearch"
      :productNameList="productNameList"
      :manageGonghuoList="manageGonghuoList"
      :manageAddressList="manageAddressList"
      :getBaocaiInfo="getBaocaiInfo"
    />
    <a-table
      :columns="columns"
      :data="outData"
      size="large"
      :pagination="pagination"
      @page-change="handlePageChange"
      :bordered="{ wrapper: true, cell: true }"
    >
      <!-- 品名 -->
      <template #product_name_id="{ record }">
        <span>{{ getProductName(record.product_name_id) }}</span>
      </template>
      <!-- 规格 -->
      <template #guige="{ record }">
        <span>{{ getGuige(record.product_name_id) }}</span>
      </template>
      <!-- 出库数量 -->
      <template #out_num="{ record }">
        <span>{{ record.out_num }}{{getUnit(record.product_name_id)}}</span>
      </template>
      <!-- 库管 -->
      <template #house_id="{ record }">
        <span>{{ getHouseName(record.house_id) }}</span>
      </template>
      <!-- 存放地 -->
      <template #address_id="{ record }">
        <span>{{ getAddress(record.address_id) }}</span>
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts" setup>
import { nextTick, ref,reactive } from 'vue';
import { getBaocaiOutList } from '@/api/storeroom';
import BaocaiOutSearch from './baocaiOutSearch.vue';

const props = defineProps({
  getProductName: { type: Function },
  getGuige: { type: Function },
  manageGonghuoList: { type: Array },
  manageAddressList: { type: Array },
  productNameList: { type: Array },
  getUnit:{ type: Function },
});
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
});
const handlePageChange = (current: number) => {
  pagination.current = current;
  getBaocaiInfo(current);
};
const baocaiOutSearch = ref(null);
const outData = ref([]);
const getBaocaiInfo = async (currentPage = 1) => {
  outData.value = [];
  let params = baocaiOutSearch.value.form;
  params.begin_time = '';
  params.end_time = '';
  if (params.chuku_date.length > 0) {
    params.begin_time = params.chuku_date[0];
    params.end_time = params.chuku_date[1];
  }

  params.current = currentPage;
  pagination.current = currentPage;
  const { code, data } = await getBaocaiOutList(params);
  if (code === 200) {
    pagination.total = data.total;
    outData.value = data.records;
  }
};
nextTick(() => {
  getBaocaiInfo();
});
const getHouseName = (house_id) => {
  return props.manageGonghuoList.find((item) => item.id === house_id)
    .house_name;
};
const getAddress = (address_id) => {
  return props.manageAddressList.find((item) => item.id === address_id)
    .manage_address;
};
defineExpose({
  getBaocaiInfo
})
const columns = ref([
  {
    title: '#',
    dataIndex: 'id',
    width: 80,
    align: 'center',
  },
  {
    title: '品名',
    slotName: 'product_name_id',
    align: 'center',
  },
  {
    title: '规格',
    slotName: 'guige',
    align: 'center',
  },
  {
    title: '出库数量',
    slotName: 'out_num',
    align: 'center',
  },
  {
    title: '出库时间',
    dataIndex: 'out_date',
    align: 'center',
  },
  {
    title: '领料部门',
    dataIndex: 'dep_name',
    align: 'center',
  },
  {
    title: '领料人',
    dataIndex: 'dep_people',
    align: 'center',
  },
  {
    title: '库管',
    slotName: 'house_id',
    align: 'center',
  },
  {
    title: '存放地',
    slotName: 'address_id',
    align: 'center',
  },
  {
    title: '备注',
    dataIndex: 'out_remark',
    align: 'center',
  },
]);
</script>

<style lang="less" scoped></style>